define(['backbone'], function(Backbone) {
  'use strict';
  
  var Checkbox = Backbone.View.extend({
    options: {
      checked: false,
      lable: '',
      onStateChanged: function() {}
    },
    events: {
      'click #mob-checkbox-icon': 'updateCheckStatus'
    },
    initialize: function(options) {
      this.options = options;
      this.render();
    },
    render: function() {
      var options = this.options,
        h = [];
      h.push('<div class="mob-icon-container">');
      if (options.checked) {
        h.push('<i id="mob-checkbox-icon" class="icons-checkbox-pressed"></i>');
      } else {
        h.push('<i id="mob-checkbox-icon" class="icons-checkbox-normal"></i>');
      }
      h.push('<p>' + options.lable + '</p>');
      h.push('</div>');
      this.$el.append(h.join(''));
    },
    updateCheckStatus: function() {
      var options = this.options;
      if (options.checked) {
        $('#mob-checkbox-icon', this.el).removeClass('icons-checkbox-pressed').addClass('icons-checkbox-normal');
        options.checked = false;
      } else if (!options.checked) {
        $('#mob-checkbox-icon', this.el).removeClass('icons-checkbox-normal').addClass('icons-checkbox-pressed');
        options.checked = true;
      }
      options.onStateChanged(options.checked);
    },
    isChecked: function() {
      return this.options.checked;
    }
  });
  return Checkbox;
});
